<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
</body>
<script>
    // 扩展运算符  ...   => 展开数组和对象

    // 展开数组(伪数组,字符串)
    // 将一个数组转为用逗号分隔的参数序列。 
    // a. 放到函数中作为函数的实际参数
    // b. 放到数组中 => 数组拼接


    var list = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    console.log(list);

    // a. 放到函数中作为函数的实际参数
    // console.log(...list);  // ...list => 1, 4, 7, 2, 5, 8, 3, 6, 9
    // console.log(1, 4, 7, 2, 5, 8, 3, 6, 9);

    // var max = Math.max(...list);
    // console.log(max);

    // 放到数组中
    // (1)  数组的浅拷贝
    // var list = [1, 4, 7, 2, 5, 8, 3, 6, 9, ["a", "b", "c"]];
    // var arr = [...list];
    // console.log(list, arr);
    // console.log(list[9] === arr[9]);

    // (2) 伪数组转真数组
    // var liList = document.querySelectorAll("li");
    // console.log(liList);

    // // var arr = Array.from(liList);
    // var arr = [...liList];
    // console.log(arr, Array.isArray(arr));

    // // (3) 数组合并
    // var arr = [1, 2, 3];
    // var brr = [2, 3, 4];

    // var list = [...arr, ...brr];
    // console.log(list); //去重

    // // (4) 展开字符串
    // var str = "hello";
    // var arr = [...str];
    // console.log(arr);



    // 展开对象
    // 展开对象 得到逗号分隔的键值对序列  => 只能放到对象中

    var obj = { name: "张三", age: 18 }
    // console.log(...obj);   //报错

    // 对象的浅拷贝
    var o = {
        ...obj,
    };
    console.log(o);

    // (2)  对象合并 

    var a = { a: 1 }
    var b = { b: 2 }
    var c = { c: 3 }
    var d = { d: 4, a: 10 }

    var obj = { ...a, ...b, ...c, ...d };
    console.log(obj);










</script>

</html>